<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import type {PageInfo} from "@/types/cg/Util.ts";
import {deleteItem} from "@/Api/CGApi/CGServ.ts";
import TestPage from "@/test/TestPage.vue";
import {ElMessage} from "element-plus";
import request from "@/util/request.ts";

let pageNum = ref(1)
let pageSize = ref(8)
let pageInfo = ref<PageInfo>({
  pages:0,
  pageNum:pageNum.value,
  pageSize:pageSize.value,
  total:0,
  list:null,
})
let allPage=ref(0)
let currentUser = reactive({
  uid:"1",
  userName:"admin",
})
const route = useRoute()
const router = useRouter()

const tableColumns = ref([

  { prop: 'code', label: '采购订单编号',width:200 },
  { prop: 'create_date' ,label:'单据日期',width:150},
  { prop: 'pro_name' , label: '供应商'},
  { prop: 'dept_name' , label: '业务部门'},
  { prop: 'user_name' , label: '业务员' ,width: 150},
  { prop: 'info', label: '备注' ,width:200},
  { prop: 'status', label: '状态' },
  { prop: 'get_date',label: '需求日期',width:150},
  { prop: 'address' , label: '地址' ,width: 200},
  { prop: 'num' , label: '数量'},
  { prop: 'get_num' , label: '入库数量'},
  { prop: 'total' ,label: '总金额'},
  { prop: 'wait_amount' ,label:'未发货金额'},
  { prop: 'get_amount'  ,label: '发货金额'},
  { prop: 'finish_amount' , label: '结算金额'},
  { prop: 'adv_amount',label: '累计预付款'},
  { prop: 'use_amount', label: '预付款使用金额'},

  { prop: 'create_date', label: '制表日期',width:150 },
  { prop: 'create_name' , label: '制表人'  ,width: 150 },
  { prop: 'modi_date' , label: '修改日期',width:150 },
  { prop: 'modi_name' ,label:'修改人' ,width: 150},
])


let tableData = ref<[]>([])
async function getPage(){
  let res = await request.post("cg/CGDD/getPage",{
    "pageNum":pageNum.value,
    "pageSize":pageSize.value,
  })
  console.log(res.data.data)
  pageInfo = ref(res.data.data)
  tableData.value = pageInfo.value.list
  // pageNow.value = pageInfo.value.pageNum
  console.log(tableData.value);
  allPage.value = pageInfo.value.total
}
const handlePageChange = (newPage: number) => {
  pageNum.value = newPage
  getPage()
}

getPage()

const goModi=(code:any)=>{
  console.log(code.code)
  router.push({
    path:'cgddInfo',
    query:{
      code: code.code // 传递单据编号
    }
  })
}
async function del(code:any){
  console.log(code.code)
  let res = await deleteItem(code , "CGDD/delCGDD")
  if (res.data.code == 200){
    pageNum.value = 1;
    await getPage();
  }
}

const handleTableAction = (actionName: string) => {
  if (actionName == "add"){
    router.push("cgddInfo")
  }
}


const auditFormRef = ref();
const auditForm = reactive({
  code: '',
  checkManId: '',
  checkManName:'',
  checkComment: '',
  checkRes: null
});
// 表单验证规则
const auditRules = reactive({
  checkComment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
  checkRes: [{ required: true, message: '请选择审核结果', trigger: 'change' }]
});

let auditDialogVisible = ref(false)
const audit = (code:any)=>{
  auditForm.code = code.code
  auditForm.checkManName = currentUser.userName
  auditDialogVisible.value = true
}

const submitAudit = async () => {
  // 表单验证
  if (!await auditFormRef.value?.validate()) return;


  try {
    const response = await request.post('cg/CGDD/check', {
      code: auditForm.code,
      typeId: 21,
      status: 3,
      checkManId: currentUser.uid.toString(),  // 绑定审核人ID
      checkComment: auditForm.checkComment, // 绑定审批意见
      checkRes: auditForm.checkRes // 绑定审核结果
    });

    ElMessage.success(response.data.message);
    auditDialogVisible.value = false;
    await getPage()
  } catch (error) {
    ElMessage.error('审核提交失败');
  } finally {
    // 重置表单
    auditForm.checkManId = '';
    auditForm.checkComment = '';
  }
};


</script>

<template>

  <TestPage
      :table-data="tableData"
      :columns="tableColumns"
      :current-page="pageNum"
      :total="allPage"
      :page-size="pageSize"
      @page-change="handlePageChange"
      @action="handleTableAction"
      @edit="goModi"
      @delete="del"
      @audit="audit"
      @code-click="goModi"
  ></TestPage>

  <el-dialog
      v-model="auditDialogVisible"
      title="单据审核"
      width="600px"
      :close-on-click-modal="false"
  >
    <el-form :model="auditForm" :rules="auditRules" ref="auditFormRef">
      <el-form-item label="单据编号：" prop="docCode">
        <el-input
            v-model="auditForm.code"
            disabled
            placeholder="系统自动填充"
        />
      </el-form-item>

      <el-form-item label="审核人：" prop="auditor">
        <el-input
            v-model="auditForm.checkManName"
            disabled
            placeholder="系统自动填充"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="审批意见：" prop="comment">
        <el-input
            v-model="auditForm.checkComment"
            type="textarea"
            :rows="3"
            placeholder="请输入审批意见"
            maxlength="200"
            show-word-limit
        />
      </el-form-item>
      <el-form-item label="审核结果：" prop="checkResult">
        <el-select
            v-model="auditForm.checkRes"
            placeholder="请选择审核结果"
            style="width: 100%"
        >
          <el-option label="通过" :value="true" />
          <el-option label="不通过" :value="false" />
        </el-select>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button @click="auditDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitAudit()">提交审核</el-button>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>